<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
        }
        button{
            border-radius: 10px;
        }
        #template{
            display: none;
        }
        #shade{
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }
        #pop{
            width: 700px;
            padding: 20px 50px;
            background: #fff;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <h2>学生信息管理系统</h2>
        <p style="height: 50px;line-height: 50px;">
            <span>学生信息</span>
            <span>成绩管理</span>
            <button id="addStudent" style="float: right;width: 80px;height: 50px;">+添加学生</button>
        </p>
        <hr>
        
        <table class="table">
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>籍贯</th>
                    <th>入学时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr id="template">
                    <td class="id"></td>
                    <td class="name"></td>
                    <td class="age"></td>
                    <td class="sex"></td>
                    <td class="city"></td>
                    <td class="joinDate"></td>
                    <td>
                        <button class="complie btn-info" style="width: 80px;height: 50px;">编辑</button>
                        <button class="delete btn-danger" style="width: 80px;height: 50px;">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="shade"></div>
    <div id="pop">
        <h2>添加学生</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="data-name" class="col-sm-2 control-label">学生姓名</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="data-name" placeholder="学生姓名">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">年龄</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="data-age" placeholder="年龄">
                </div>
            </div>
            <div class="form-group">
                <label for="data-age" class="col-sm-2 control-label">性别</label>
                <label class="radio-inline">
                    <input type="radio" name="sex" checked id="data-man">男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" id="data-female">女
                </label>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所在城市</label>
                <select name="" id="province" style="border-top: 1px solid black;"></select>
                <select name="" id="city" style="border-top: 1px solid black;"></select>
                <select name="" id="area" style="border-top: 1px solid black;"></select>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">入学日期</label>
                <div class="col-sm-10">
                    <input type="input" class="form-control" id="data-joinDate" onclick="WdatePicker()" placeholder="入学日期">
                </div>
            </div>
            <div class="form-group" style="float:right;margin-top:20px;">
                <button id="change" class="btn btn-primary" style="display: none;">确认改变</button>
                <button id="submit" class="btn btn-primary">确认添加</button>
                <button id="cancel" class="btn btn-default">取消</button>
            </div>
        </div>
    </div>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="citys.js"></script>
<script src="datepicker/WdatePicker.js"></script>
<script>
    let address = "http://10.35.170.245:1001"
    let temp = $("#template")
    //点击删除后，删除数据库里面的内容，同时让页面上的内容消失
    temp.find(".delete").click(function(){
                    let deleteList = $(this)
                    $.ajax({
                        url:`${address}/delete`,
                        data:{
                            id:$(this).closest("tr").find(".id").html()
                        },
                        success(data){
                            if(data === "error"){
                                alert("删除失败")
                            }
                            else{
                                deleteList.closest("tr").fadeOut()
                            }
                        }
                    })
                })

    //更改学生信息，将现在学生的信息放入点击编辑之后出现的页面中
    temp.find(".complie").click(function(){
        let complieList = $(this).closest("tr")
        $("#shade").css("display","block")
        $("#pop").css("display","block")
        $("#pop").find("h2").html("编辑学生")
        $("#data-name").val(complieList.find(".name").html())
        $("#data-age").val(complieList.find(".age").html())
        $("#data-joinDate").val(complieList.find(".joinDate").html())
        if(complieList.find(".sex").html() === "女"){
            $("#pop").find("#data-female").prop("checked",true)
        }
        if(complieList.find(".sex").html() === "男"){
            $("#pop").find("#data-man").prop("checked",true)
        }
        $("#submit").css("display","none")
        $("#change").css("display","inline-block")       
        $("#change").click(function(){
            $.ajax({
                url:`${address}/change`,
                data:{
                    id:complieList.find(".id").html(),
                    name:$("#pop").find("#data-name").val(),
                    age:$("#data-age").val(),
                    sex:$("#data-female")[0].checked ? 0:1,
                    city:$("#province").val(),
                    joinDate:$("#data-joinDate").val(),
                },
                success(data){
                    if(data === "success"){
                        $("#shade").css("display","none")
                        $("#pop").css("display","none")
                        history.go(0)
                    }
                    else{
                        alert("更改失败")
                    }
                }
            })
        })
    })
    window.onkeydown = function(event){
        if(event.keyCode === 13){
            $("#change").click()
            $("#submit").click()
        }
        if(event.keyCode === 27){
            $("#cancel").click()
        }
    }
    //点击添加学生之后让遮罩层显示
    $("#addStudent").click(function(){
        $("#shade").css("display","block")
        $("#pop").css("display","block")
    })
    //点击取消之后让遮罩层消失
    $("#cancel").click(function(){
        $("#shade").css("display","none")
        $("#pop").css("display","none")
    })
    //点击提交之后，将填写的值上传到数据库
    $("#submit").click(function(){
        if(!($("#data-name").val() && $("#data-age").val() && $("#data-joinDate").val())){
            return;
        }
        else{
            console.log($("#data-name").val())
            $.ajax({
                url:`${address}/addStudent`,
                data:{
                    name:$("#pop").find("#data-name").val(),
                    age:$("#data-age").val(),
                    sex:$("#data-female")[0].checked ? 0:1,
                    city:$("#province").val(),
                    joinDate:$("#data-joinDate").val(),
                },
                success(data){
                    if(data === "success"){
                        $("#shade").css("display","none")
                        $("#pop").css("display","none")
                        history.go(0)
                    }
                    else{
                        alert("添加失败")
                    }
                }
            })
        }
    })
    //刚进入页面的时候，将后台传来的数据导入到网页中
    $.ajax({
        url:`${address}/insert`,
        data:{

        },
        success(data){
            data.forEach(Item => {
                temps = temp.clone(true);
                temps.attr("id","")
                temps.find(".id").html(Item.id);
                temps.find(".name").html(Item.name);
                temps.find(".age").html(Item.age);
                temps.find(".sex").html(Number(Item.sex) ? "男":"女");
                temps.find(".city").html(Item.city);
                temps.find(".joinDate").html(Item.joinDate)
                temps.appendTo("tbody")

            });
        }
    })

</script>